html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before,
*:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
font-family: "Inter", Arial;
justify-content: center;
align-items: center;
background: #151515;
}
:root {
--text: #fff;
--line: #bbc1e1;
--line-active: #4c79ff;
}
p {
font-size: 18px;
margin: 0;
color: var(--text);
}
p a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
margin: 0 var(--spacing, 0px);
transition: margin 0.25s;
}
p a svg {
width: 76px;
height: 40px;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 7px) translateZ(0);
fill: none;
stroke: var(--stroke, var(--line));
stroke-linecap: round;
stroke-width: 2px;
stroke-dasharray: var(--offset, 69px) 278px;
stroke-dashoffset: 361px;
transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
}
p a:hover {
--spacing: 4px;
--stroke: var(--line-active);
--stroke-delay: 0.1s;
--offset: 180px;
}